import { Select } from 'antd';
import { useEffect, useState } from 'react';
import an58 from '@mmstudio/an000058';
import { Message as M1, Result as R1 } from '../../api/team/teamxq/content/s001.api';
import api from '../../../atoms/api';
import Chengyuan from './chengyuan';

export type Result = {
	ok: true;
	data: Pick<ITbteam, 'team_id' | 'teamname' | 'teammate'>[];
	mate: Pick<ITbpteam, 'name'>[];
	options: Pick<ITbpteam, 'originalclass' | 'originalmajor'>[];
} | {
	ok: false;
	message: string;
};

export default function Content({
	grades
}: {
	grades: string[];
}) {
	const [options, setoptions] = useState<Pick<ITbpteam, 'originalmajor' | 'originalclass'>[]>([]);
	const [mate, setmate] = useState<Pick<ITbpteam, 'name'>[]>([]);
	const [data, setdata] = useState<Pick<ITbteam, 'team_id' | 'teamname' | 'teammate'>[]>([]);
	useEffect(() => {
		void (async () => {
			const ret = await an58<R1, M1>(api['/api/team/teamxq/content/s001'], 'post'
			);
			if (ret.ok === true) {
				setdata(ret.data);
				setmate(ret.mate);
				setoptions(ret.options);
			}
		})();
	}, []);
	return <>
		年级：<Select showSearch
			style={{ width: 200 }}
			filterOption={(input, option) =>
				option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
			}>
			{grades.map((grade) => {
				return <option key={grade}>{grade}</option>;
			})}


		</Select>
		专业：<Select showSearch
			style={{ width: 200 }}
			filterOption={(input, option) =>
				option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
			}>
			{options.map((a, b) => {
				return <option key={b}>{a.originalmajor}</option>;
			})}
		</Select>
		班级：<Select showSearch
			style={{ width: 200 }}
			filterOption={(input, option) =>
				option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
			}>
			{options.map((a, b) => {
				return <option key={b}>{a.originalclass}</option>;
			})}
		</Select>
		<div className='a001'>
			{data.map((it, key) => {
				return <Chengyuan key={key} name={it.teamname} number={it.team_id} leader={it.teammate} />;
			})}
		</div>
		<style jsx>{`
.a001{
display:flex ;
flex-wrap: wrap;
justify-content: space-around;
}
`}</style>
	</>;
}
